<template>
<!--  <div :style="styles">-->
<!--  </div>-->
  <NoticeBar v-bind="{...props.schema}" :text="props.schema.value" left-icon="volume"  scrollable mode="link"></NoticeBar>

</template>



<script lang="ts" setup>
/**
 * h5 通知栏
 */
import { NoticeBar } from 'vant';
import {watch,computed} from 'vue'
import util from "@/utils/util"
const props = defineProps({
  schema: {
    type: Object,
    default: () => ({}),
  },
});
const styles=computed(()=>{
  let result={
    display: "flex",
  }
  if(props.schema){
    for(let key in props.schema){
      if(key.indexOf("styles.")!=-1){
        let n_key=key.replaceAll("styles.","");
        let value=props.schema[key];
        if(n_key.indexOf("padding-")!=-1){
          // value+="px";
          value+="px"
        }
        result[n_key]=value;
      }
    }

    if(!props.schema.value&& props.schema.componentProps.value){
      props.schema.value=props.schema.componentProps.value
    }
  }
  // console.log("---props.schema::",props.schema)
  // console.log("---result::",result)
  return result;

});

function getUnit(){
  // return props.schema.unit?props.schema.unit:props.schema.componentProps.unit
  return "px"
}


</script>

<style scoped>

</style>
